<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">   <!--移动设备优先  -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">   <!--禁止缩放   -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<title></title>
	</head>
	<body>
		<div class="container">
			<p class="lead text-center">我是表格，我用了重点标签lead和居中标签text-center</p>
			<table class="table table-striped table-bordered table-hover">
				<tr>
			  	<td><strong>姓名</strong></td>
			  	<td><strong>电话</strong></td>
			  	<td><strong>备注</strong></td>
			  </tr>
			  <tr>
			  	<td>方妮</td>
			  	<td>17601362254</td>
			  	<td>通过 .table-striped 类可以给 tbody之内的每一行增加斑马条纹样式。</td>
			  </tr>
			  <tr>
			  	<td>杨茗</td>
			  	<td>13575220405</td>
			  	<td>添加 .table-bordered 类为表格和其中的每个单元格增加边框。</td>
			  </tr>
			  <tr>
			  	<td>源静香</td>
			  	<td>17601362254</td>
			  	<td>通过添加 .table-hover 类可以让 tbody中的每一行对鼠标悬停状态作出响应。</td>
			  </tr>
			  <tr>
			  	<td>哆啦A梦</td>
			  	<td>17601362254</td>
			  	<td>通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。<strong>此表单中没有使用</strong></td>
			  </tr>
			  <tr>
			  	<td>野比大雄</td>
			  	<td>17601362254</td>
			  	<td class="success">我用了success标签变成了这样</td>
			  </tr>
			  <tr>
			  	<tr>
			  	<td>骨川小夫</td>
			  	<td>17601362254</td>
			  	<td class="info">我用了info变成这样</td>
			  </tr>
			  <tr>
			  <tr>
			  	<td>出木杉</td>
			  	<td>17601362254</td>
			  	<td class="warning">我用了warning变成这样</td>
			  </tr>
			  <tr>
			  	<td>胖虎</td>
			  	<td>17601362254</td>
			  	<td class="active">我用了danger变成这样</td>
			  </tr>
			  <tr>
			  	<td colspan="3">将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。</td>
			  </tr>
			</table>
			
			<br />
			<br />
			<form>
			  <div class="form-group">
			    <label for="exampleInputEmail1">邮箱</label>
			    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">密码</label>
			    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputFile">上传照片</label>
			    <input type="file" id="exampleInputFile">
			    <p class="help-block">注：图片大小不超过2m</p>
			  </div>
			  <div class="checkbox">
			    <label>
			      <input type="checkbox"> Check me out
			    </label>
			  </div>
			  <button type="submit" class="btn btn-default">Submit</button>
			</form>
			
			<br />
			<br />
			<form class="form-inline">
			  <div class="form-group">
			    <label for="exampleInputName2">Name</label>
			    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputEmail2">Email</label>
			    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
			  </div>
			  <button type="submit" class="btn btn-default">Send invitation</button>
			</form>
			
			<br />
			<br />
			<form class="form-inline">
			  <div class="form-group">
			    <label class="sr-only" for="exampleInputEmail3">Email address</label>
			    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
			  </div>
			  <div class="form-group">
			    <label class="sr-only" for="exampleInputPassword3">Password</label>
			    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
			  </div>
			  <div class="checkbox">
			    <label>
			      <input type="checkbox"> Remember me
			    </label>
			  </div>
			  <button type="submit" class="btn btn-default">Sign in</button>
			</form>
			
			
			<div class="form-group has-success has-feedback">
				<label></label>
				<input>
				<span></span>
				<span></span>
			</div>
			
		</div>
	</body>
</html>
